<template>
	<view class="main">
		<uv-sticky ref="backTop" top="300" bg-color="#fff">
			<view class="sv">
				<uv-search v-model="searchValue" @search="getPatient" placeholder="搜索患者" :animation="true"></uv-search>
			</view>
			<view class="mtab">
				<view :class="['mtabi',tabIndex == o ?'mtabiA':'']" v-for="(i,o) in tabList" :key="o" @click="tabIndex = o">
					{{i}}
				</view>
			</view>
		</uv-sticky>

		<view class="mv">
			<view class="mvi" v-for="(i,o) in records" :key="o">
				<view class="mvit">
					<view class="mvitl">
						<img :style="{backgroundColor:i.img?'':'#eee'}"
							:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
					</view>
					<view class="mvitr">
						<view class="mvitrt">{{i.name}}<text :style="{color:i.sex==1?'#409EFF':'#ffaaff'}">{{i.sex_dictText}}</text>
							<text> {{i.age}}岁</text>
							<text :class="['mvitf','mvitf'+i.type]"> {{i.type_dictText}}</text>
						</view>
						<view class="mvitrb">{{i.phone}}</view>
					</view>
					<!-- <view :class="['mvitf','mvitf'+i.type]">{{i.type_dictText}} </view> -->
				</view>

				<view class="mvic">
					<view class="mvict">预约时间：<text>{{i.date}} {{i.time}}</text></view>
					<view :class="['mvicb','mvicb'+i.status]">{{i.status_dictText}}</view>
				</view>
			</view>
		</view>

		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				tabIndex: 0,
				searchValue: '',
				tabList: ['全部', '已预约', '已完成', '已过号', '已取消'],
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				records: []
			}
		},
		mounted() {
			this.getPatient()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getPatient(index)
			},
			getPatient() {
				this.records = [{
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 1,
						sex_dictText: '男',
						age: 51,
						status: 0,
						status_dictText: '已预约',
						type: 1,
						type_dictText: '在线问诊',
					},
					{
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 1,
						sex_dictText: '男',
						age: 51,
						status: 1,
						status_dictText: '已完成',
						type: 0,
						type_dictText: '线下门诊',
					}, {
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 1,
						sex_dictText: '男',
						age: 51,
						status: 0,
						status_dictText: '已预约',
						type: 1,
						type_dictText: '在线问诊',
					},
					{
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 1,
						sex_dictText: '男',
						age: 51,
						status: 1,
						status_dictText: '已完成',
						type: 0,
						type_dictText: '线下门诊',
					},
					{
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 2,
						sex_dictText: '女',
						age: 51,
						status: 2,
						status_dictText: '已过号',
						type: 0,
						type_dictText: '线下门诊',
					},
					{
						id: 1,
						name: '张大师',
						date: '2025-03-11',
						time: '08:45-09:00',
						phone: 13322334433,
						sex: 1,
						sex_dictText: '男',
						age: 51,
						status: 3,
						status_dictText: '已取消',
						type: 0,
						type_dictText: '线下门诊',
					},
				]
			},

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>


<style scoped lang="scss">
	.main {
		min-height: 100vh;
		background: linear-gradient(to bottom, #12acee22, #2c9b9422);
	}

	.sv {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
	}

	.mv {
		padding-top: 20rpx;
	}

	.mvi {
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;

		.mvit {
			display: flex;
			align-items: center;
			margin-top: -20rpx;
			position: relative;

			.mvitl {
				background-color: #fff;
				border-radius: 50%;
				padding: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				position: relative;
				top: -10rpx;

				img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 22rpx;
					border-radius: 50%;
				}
			}

			.mvitr {
				font-size: 31rpx;
				margin-top: 10rpx;

				.mvitrt {
					font-weight: bold;
					margin-bottom: 10rpx;

					text {
						font-weight: normal;
						display: inline-block;
						margin-left: 20rpx;
						color: #666;
					}

					.mvitf {
						display: inline-block;
						font-weight: bold;
						font-size: 30rpx;
						color: #409EFF;
						padding: 5rpx 10rpx;
						border-radius: 12rpx;
						border: 1px solid #409EFF;
					}

					.mvitf0 {
						color: #2c9b94;
						border: 1px solid #2c9b94;
					}
				}

				.mvitrb {
					color: #444;
				}
			}


		}



		.mvic {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.mvict {
				font-size: 30rpx;
				color: #444;

				text {
					color: #000;
				}
			}

			.mvicb {
				border-radius: 12rpx;
				color: #fff;
				font-size: 30rpx;
				padding: 0 10rpx;
			}

			.mvicb0 {
				background-color: #E6A23C;
			}

			.mvicb1 {
				background-color: #409EFF;
			}

			.mvicb2 {
				background-color: #F56C6C;
			}

			.mvicb3 {
				background-color: #909399;
			}
		}

		.mvie {
			color: #fff;
			background-color: #E6A23C;
			margin-top: 20rpx;
			text-align: center;
			border-radius: 8rpx;
			padding: 10rpx 0;
		}
	}


	.mtab {
		border-radius: 30rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		padding: 15rpx 5rpx;
		background-color: #fff;
		margin-bottom: 10rpx;

		.mtabi {
			width: 25%;
			text-align: center;
			padding: 10rpx 0;
			font-size: 26rpx;
			transition: all .3s;
			border-radius: 30rpx;
		}

		.mtabiA {
			background-color: #2c9b94;
			color: #fff;
		}
	}
</style>